<script setup>
import { ref, onMounted } from 'vue'
import { getPoleList, addPoleList, editAddRole } from '@/api/rodManage'
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits([''])
const close = () => {
  form.value = {
    poleName: '',
    poleNumber: '',
    poleIp: '',
    areaId: null,
    poleType: ''
  }
  emit('update:showModal', false)
}
const form = ref({
  poleName: '',
  poleNumber: '',
  poleIp: '',
  areaId: null,
  poleType: ''
})
const options = ref([''])
const getPoleListApi = async () => {
  const { data } = await getPoleList({ page: '', pageSize: '999' })
  // console.log(data);
  const newArr = data.rows.map((item) => {
    return { areaId: item.areaId, areaName: item.areaName }
  })
  console.log(newArr)
  options.value = Array.from(new Set(newArr.map((item) => JSON.stringify(item)))).map((item) =>
    JSON.parse(item)
  )
}
onMounted(() => {
  getPoleListApi()
})
//添加
const onOk = async () => {
  if (form.value.id) {
    delete form.value.areaName
    delete form.value.poleStatus
    await editAddRole(form.value)
  } else {
    await addPoleList(form.value)
  }
  emit('success')
  close()
}
//暴露方法
const getPoleDetailsApi = async (value) => {
  form.value = value
}
//向父组件暴露方法
defineExpose({
  getPoleDetailsApi
})
</script>
<template>
  <a-modal title="添加一体杆" :visible="props.showModal" @cancel="close" width="540px" @ok="onOk">
    <div class="modalBox">
      <a-form layout="vertical">
        <a-form-item label="一体杆名称">
          <a-input v-model:value="form.poleName" placeholder="请输入一体杆名称"></a-input>
        </a-form-item>
        <a-form-item label="一体杆编号">
          <a-input
            v-model:value="form.poleNumber"
            placeholder="请输入一体杆编号"
            :disabled="form.id"
          ></a-input>
        </a-form-item>
        <a-form-item label="一体杆IP">
          <a-input v-model:value="form.poleIp" placeholder="请输入一体杆IP"></a-input>
        </a-form-item>
        <a-form-item label="关联区域">
          <a-select
            placeholder="请选择关联区域"
            v-model:value="form.areaId"
            :options="options"
            :field-names="{ label: 'areaName', value: 'areaId' }"
          ></a-select>
        </a-form-item>
        <a-form-item label="一体杆类型">
          <a-select placeholder="请选择一体杆区域" v-model:value="form.poleType">
            <a-select-option value="enterance">入口</a-select-option>
            <a-select-option value="export">出口</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<style lang="less" scoped>
.modalBox {
  padding: 0 76px;
}
</style>
